tags: 鐵人賽 React javascript nodejs vscode

• 鐵人賽第八天，我想先放緩腳步，讓各位好好消化一下前一週所學的React，這幾天，我準備幾個javascript的章節，帶領大家認識一下javascript的一些獨特用法，讓你的React寫得更優雅。

• 開啟terminal，輸入node，就可以快速操作nodeJS囉!

宣告Array的幾種方式

• 一般使用Array呼叫，你可以

let a = [100,200,300];
console.log(a[0]+100);
>200

• 也可以新增一個物件，然後用pop及push來操控他

let a = new Array();
a.push(100);
a.push(999);
console.log(a); // output [100,999]

console.log(a.pop()); //output 999

Array家族的function

forEach

• 用來遍歷Array中的所有參數

> ['coke', 'juice', 'water'].forEach((val, idx, array)=>
console.log(
'val:'  ,val, 
'idx:'  ,idx,
'array:',array)
);

val: coke  idx: 0 array: [ 'coke', 'juice', 'water' ]
val: juice idx: 1 array: [ 'coke', 'juice', 'water' ]
val: water idx: 2 array: [ 'coke', 'juice', 'water' ]

map

• 用來遍歷Array中的所有參數~ (疑? 跟forEach有什麼差別??)

> ['coke', 'juice', 'water'].map((val, idx, array)=>
console.log(
'val:'  ,val, 
'idx:'  ,idx,
'array:',array)
);

val: coke  idx: 0 array: [ 'coke', 'juice', 'water' ]
val: juice idx: 1 array: [ 'coke', 'juice', 'water' ]
val: water idx: 2 array: [ 'coke', 'juice', 'water' ]

map和forEach差異性

• 這兩個func都可以

// forEach範例: 不會回傳值而改變原本的Array
> table=['coke', 'juice', 'water'];
> table = table.forEach((val, idx, array)=>`${idx}_`+val);
> console.log(table);
undefined  //<-- forEach不會回傳值

// map範例: 會自動組裝return值，並完整交給接收的table
> table=['coke', 'juice', 'water']
> table = table.map((val, idx, array)=>`${idx}_`+val)
> console.log(table1)
[ '0_coke', '1_juice', '2_water' ] //<-- map 

該用map還是forEach??

• 如果你單純的想遍歷所有參數~選forEach
• 如果你想取得參數，做些事情，並回傳值組成新的Array～不用懷疑，用map就對了

速度呢?

• 先來聊聊速度，之前我對map的認知，效能是凌駕於forEach，不過這篇倒是有不一樣的看法，說明如下圖。
  

• 根據他的實驗，map及forEach都有表現不錯的時候，有趣的是，這些都比傳統的for還慢 XD

reduce

• reduce是我覺得Array函式最有趣的一個，記得當時剛看到別人用這樣的寫法，還一時摸不著頭緒，不過，其實也很簡單啦。
• 簡單來說，他就是方便我們做 陣列參數的累加

• [Your_Array].reduce( func, init_val)
• ex:

let a = [3,5,7,6,2];
let reduceFunc = (accum, val)=>accum+val
let result = a.reduce(reduceFunc, 0); // result=23

• initVal設定為0，然後執行reduceFunc開始遍歷Array a中的每個元素，依序累加，每加一次，就會把結果塞給accum，拆解如下

• reduce學起來，對後面我們將各元件操作state func匯集起來，相當有用!先賣個關子囉!

slice

• 就像切蛋糕一樣，切切切～

>let numList = [0,1,2,3,4,5];
>numList.slice(0,3);
[ 0, 1, 2 ]

宣告一個連續數字的Array

• 以前在寫python的時候，只要下這些指令，就可以直接使用一個連續數字的Array，敲便利der!!

for i in range(5):
    print(i) //印出 0,1,2,3,4

• JS也有，不過寫法顯得有些醜，還需要導入** Array解構(後面章節會說) **，不過，學起來吧！

> numList = [... Array(5)].map((v, idx)=>idx)
[ 0, 1, 2, 3, 4 ]

其他的Array().func也值得一看

• 截錄MSDN表格
  

結論

• 今天我們好好認識了JS的Array，也知道他隨著改版不斷精進，善用這些方法，可以讓你寫React時，有更清楚的結構化；能讓自己帥一點，不學嗎~?
  

參考資源

• What Is the Difference Between map() and forEach() in JavaScript?
• JavaScript中Map和ForEach的区别
• MSDN-Array泛形方法